<template>
  <!-- 时间选择弹框 -->
  <uni-popup ref="timePopup" type="bottom">
    <view class="time-picker-modal">
      <view class="picker-header">
        <text class="picker-cancel" @click="cancel">取消</text>
        <text class="picker-title">选择时间</text>
        <text class="picker-confirm" @click="confirm">确定</text>
      </view>
      <picker-view
        class="picker-view"
        :value="pickerValue"
        @change="pickerChange"
        :indicator-style="indicatorStyle"
      >
        <picker-view-column>
          <view v-for="hour in hours" :key="hour" class="picker-item">
            {{ hour }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view v-for="minute in minutes" :key="minute" class="picker-item">
            {{ minute }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:modelValue", "confirm"]);

// 弹框引用
const timePopup = ref(null);

// 时间数据
const hours = ref([]);
const minutes = ref([]);
const pickerValue = ref([0, 0]);
const indicatorStyle = "height: 68rpx;";

// 初始化时间数据
const initTimeData = () => {
  // 小时: 00-23
  for (let i = 0; i < 24; i++) {
    hours.value.push(String(i).padStart(2, "0"));
  }
  // 分钟: 00-59
  for (let i = 0; i < 60; i++) {
    minutes.value.push(String(i).padStart(2, "0"));
  }
};

initTimeData();

// 对外暴露方法
const open = () => {
  // 如果有初始值，同步到滚轮
  if (props.modelValue) {
    const [hour, minute] = props.modelValue.split(":");
    const hourIdx = hours.value.findIndex((h) => h === hour);
    const minuteIdx = minutes.value.findIndex((m) => m === minute);
    if (hourIdx !== -1 && minuteIdx !== -1) {
      pickerValue.value = [hourIdx, minuteIdx];
    }
  }
  timePopup.value?.open();
};

const close = () => {
  timePopup.value?.close();
};

defineExpose({ open, close });

// 时间选择器变化
const pickerChange = (e) => {
  pickerValue.value = e.detail.value;
};

// 取消
const cancel = () => {
  close();
};

// 确认
const confirm = () => {
  const hour = hours.value[pickerValue.value[0]];
  const minute = minutes.value[pickerValue.value[1]];
  const timeStr = `${hour}:${minute}`;

  emit("update:modelValue", timeStr);
  emit("confirm", timeStr);
  close();
};
</script>

<style lang="scss" scoped>
.time-picker-modal {
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.picker-cancel {
  font-size: 28rpx;
  color: #999;
}

.picker-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.picker-confirm {
  font-size: 28rpx;
  color: #007aff;
}

.picker-view {
  height: 400rpx;
  padding: 0;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68rpx;
  font-size: 32rpx;
  color: #333;
}
</style>
